<!--
 * @Date: 2023-03-16 14:02:34
 * @LastEditTime: 2023-03-17 10:40:04
 * @FilePath: /hua-fei-chong-zhi/src/views/vipHome/components/linkMenu.vue
 * 介绍:
-->
<script lang="ts" setup></script>

<template>
  <Ccard class="linkMenu">
    <div class="gridVar--col" style="--col: 3">
      <div class="linkMenu_item active T-A-C">
        <h3>{{ $t("zou-lu-zhuan-qian") }}</h3>
        <div class="T-S-sm">{{ $t("ni-de-jian-kang-wo-lai-mai-dan") }}</div>
      </div>
      <div class="linkMenu_item active T-A-C">
        <h3>{{ $t("shui-jue-zhuan-qian") }}</h3>
        <div class="T-S-sm">{{ $t("yi-jue-shui-xing-ling-shou-yi") }}</div>
      </div>
      <div
        @click="$router.push({ name: 'topUpPhone' })"
        class="linkMenu_item active T-A-C"
      >
        <h3>{{ $t("shou-ji-chong-zhi") }}</h3>
        <div class="T-S-sm">{{ $t("hua-fei-chong-zhi-xiang-you-hui") }}</div>
      </div>
    </div>
  </Ccard>
</template>

<style lang="less" scoped>
.linkMenu {
  .linkMenu_item {
    min-height: 220rem;
    width: 100%;
    background-size: 100% 100%;
    color: var(--C-B1);
    h3 {
      margin: var(--gap-sm) 0;
    }
    &:nth-child(1) {
      background-image: url(@@/assets/images/vipHome/menu-bg__1.png);
    }
    &:nth-child(2) {
      background-image: url(@@/assets/images/vipHome/menu-bg__2.png);
    }
    &:nth-child(3) {
      background-image: url(@@/assets/images/vipHome/menu-bg__3.png);
    }
  }
}
</style>
